<!--  -->
<template>
  <div>
    <div id="searchbox" v-if="stype=='search'">
      <div id="search">
        <img src="~assets/img/searchIcon/Icon_search.svg" alt="">
        <input type="text" name="search" placeholder="输入搜索内容">
      </div>
      <img src='~assets/img/searchIcon/message.svg'>
    </div>
    <div id='grade' v-else><h3>{{stype}}</h3></div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  methods:{
  },
  props:{
    stype:String
  },
  created() {
  
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  
  }
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
  #searchbox{
    height: 24px;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: 98%;
    display: flex;
  }
  #search{
    height: 24px;
    line-height: 22px;
    border: none;
    padding-left: 5px;
    vertical-align: middle;
    flex: 1;
    background-color: white;
    border-radius: 15px;
    box-shadow: -3px -1px 10px 1px #d3d3d3 inset;
  }
  #search input{
    background-color: #f6f6f600;
    border: none;
    width: 80%;
    padding-left: 3px;
  }
  #search img{
    width: 24px;
    padding: 0;
  }
  img{
    height: 18px;
    padding: 3px 8px;
    vertical-align: middle;
  }

  #grade{
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  #grade h3{
    color: #fff;
  }
</style>